import { StyledMediaContainer } from '@/style/global'
import styled from 'styled-components'

export const Wrap = styled(StyledMediaContainer)`
	display: flex;
	flex-direction: column;
	* {
		box-sizing: border-box;
	}
`
export const HeaderWrap = styled.div`
	height: 50px;
	min-height: 50px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	padding: 0px 0px 0px 10px;
	font-size: 14px;
	& > div:first-child {
		display: flex;
		justify-content: flex-start;
		flex: 1;
	}
	& > div:last-child {
		display: flex;
		justify-content: flex-end;
		width: 300px;
	}
`
export const CardListWrap = styled.div`
	height: 100px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-right: -30px;
	flex-wrap: wrap;
	/* width:100%; */
	& > div {
		width: calc(50% - 40px);
		margin-right: 35px;
		margin-left: 5px;
	}
	& > div:first-child {
		border-top: 1px #ccc dashed;
	}
	& > div:nth-child(2) {
		border-top: 1px #ccc dashed;
	}
`
export const NotListStyle = styled.div`
	height: 100px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #b6b6b6;
	margin-top: 195px;
	font-size: 14px;
`
